<template>
	
	<!-- 自定义navbar组件【放在窗体外部，否则被content占据间距】 -->
	<CustomNavbar :navTitle="navTitle" :isTitleStyle="true"></CustomNavbar>
	
	<view class="wrap container">
		<view class="top"></view>
		<uni-section class="container">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="dataForm">
				
				<uni-forms-item label="数据ID" required name="id">
					<uni-easyinput v-model="dataForm.id" disabled=""/>
				</uni-forms-item>
				
				<uni-forms-item label="供应商名称" required name="name">
					<uni-easyinput v-model="dataForm.name" placeholder="请输入供应商名称" />
				</uni-forms-item>
				
				<uni-forms-item label="联系电话" name="phone">
					<uni-easyinput v-model="dataForm.phone" placeholder="请输入联系电话" />
				</uni-forms-item>
				
				<uni-forms-item label="联系地址" name="address">
					<uni-easyinput v-model="dataForm.address" placeholder="请输入联系地址" />
				</uni-forms-item>
				
				<uni-forms-item label="状态" name="status">
					<uni-data-checkbox v-model="dataForm.status" :localdata="status" />
				</uni-forms-item>
				
			</uni-forms>
			<button type="primary" @click="submit('valiForm')" class="mt20 u-primary">提交</button>
			<button type="default" @click="handleReset('valiForm')" class="mt20">重置</button>
		</uni-section>
	</view>
	
</template>

<script>
	import CustomNavbar from '@/components/CustomNavbar.vue'
	import { productApi } from '@/utils/api.js'
	export default {
		data() {
			return {
				//标题
				navTitle: '',
				//表单数据
				dataForm: {
					id: '',
					name: '',
					phone: '',
					status: 0,
					address: '',
				},
				status:[
					{
						text: '启用',
						value: 0
					},
					{
						text: '禁用',
						value: 1
					},
				],
				//校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '供应商名称不能为空'
						}]
					},
					phone: {
						rules: [{
							format: 'number',
							errorMessage: '手机号码格式错误'
						}]
					},
				},
			}
		},
		components: {
			CustomNavbar
		},
		onLoad(options) {
			this.navTitle = options.navTitle
			if (options.id) {
				
				this.isButtonDisabled = true; //禁用提交
				
				uni.showToast({
					title: '正在加载数据',
					icon: 'none',
					duration: 500
				});
			
				//赋值数据【编辑】
				productApi.getSupplierList({
					id: options.id
				}).then(res => {
					if (res) {
						
						this.isButtonDisabled = false; //释放提交
						
						uni.showToast({
							title: '加载成功...',
							icon: 'none',
							duration: 500
						});
						
						this.dataForm = res.data[0];
					}
				})
			}
		},
		onReady() {
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					productApi.updateSupplier(this.dataForm).then(res=>{
						if (res) {
							uni.showToast({
							    title: res.msg,
							    icon: 'success',
							    duration: 500
							});
							setTimeout(function () {
								uni.navigateTo({
									url: '/pages/product/supplier/index'
								})
							},200)
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}
	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}
	 .popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
	 .popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
</style>

